<template>
    <div class="maxs">
        <div class="dawdaw" style="width:100%;height:100%;">
            <dv-flyline-chart :config="config" style="width:100%;height:100%;" />
        </div>
        <div style="width:100%;height:100%" class="maps" id="map">

        </div>
    </div>
</template>

<script>
import map from "../../../../node_modules/echarts/map/js/china.js"
import echarts from "echarts/lib/echarts"
export default {
    data(){
        return{
            config:{
                //bgImgUrl: './shand.jpg',
                centerPoint: [0.68, 0.52],
                points: [
                    {
                    position: [0.12, 0.235],
                    text: '新乡'
                    },
                    {
                    position: [0.43, 0.29],
                    text: '焦作'
                    },
                    {
                    position: [0.59, 0.35],
                    text: '开封'
                    },
                    {
                    position: [0.53, 0.47],
                    text: '许昌'
                    },
                    {
                    position: [0.45, 0.54],
                    text: '平顶山'
                    },
                    {
                    position: [0.36, 0.38],
                    text: '洛阳'
                    },
                    {
                    position: [0.62, 0.55],
                    text: '周口'
                    },
                    {
                    position: [0.56, 0.56],
                    text: '漯河'
                    },
                    {
                    position: [0.37, 0.66],
                    text: '南阳'
                    },
                    {
                    position: [0.55, 0.81],
                    text: '信阳'
                    },
                    {
                    position: [0.55, 0.67],
                    text: '驻马店'
                    },
                    {
                    position: [0.37, 0.29],
                    text: '济源'
                    },
                    {
                    position: [0.20, 0.36],
                    text: '三门峡'
                    },
                    {
                    position: [0.76, 0.41],
                    text: '商丘'
                    },
                    {
                    position: [0.59, 0.18],
                    text: '鹤壁'
                    },
                    {
                    position: [0.68, 0.17],
                    text: '濮阳'
                    },
                    {
                    position: [0.59, 0.10],
                    text: '安阳'
                    }
                ],
                
            }
        }
    },
    mounted(){
        this.masEcharts()
    },
    methods:{
        masEcharts(){
            var chartDom = document.getElementById('map');
            var myChart = echarts.init(chartDom);
            var option;
            var geoCoordMap = [
            /* {name: '河北', value: [115.21 , 38.44],labe:'鲁能泰山都会城三区房地产开发项目,文安庄园三期'},
            {name: '上海', value: [121.46 , 31.28],labe:'千岛湖2-3/6地块项目,海阳鲁能项目'},
            {name: '山东', value: [118.38, 37.37, 142],labe:'鲁能领秀城花山峪B地块'},
            {name: '四川', value: [103.36 , 30.65],labe:'千宜宾BQ31地块'},
            {name: '福建', value:[118.31 , 26.07],labe:'三亚红塘湾安居房'},
            {name: '广东', value: [113.98 , 22.82],labe:'重庆鲁能城四期'},
            {name: '黑龙江', value: [128.34 , 47.05],labe:'重庆鲁能泰山7号四期23街区'}, */
            ];
            option = {
            tooltip: {
                formatter: function (params) {
                //console.log(params.data.labe)
                return params.data.labe
                },
                trigger: 'item'
            },
            geo: {
                map: 'china',
                roam: true, //是否需要缩放地图
                top:'12%',
                itemStyle: {
                    normal: {
                    show:true,
                    areaColor: '#01215c',
                    borderWidth: 1,//设置外层边框
                    borderColor:'#9ffcff',
                    shadowColor: 'rgba(0,54,255, 1)',
                    shadowBlur: 30,
                    },
                    emphasis:{
                    areaColor: '#01215c',
                    shadowColor: '#fff',
                    }
                },
                label: {      //高亮时  字体颜色                       
                    emphasis: {
                    textStyle: {
                        color: '#fff',
                        show: true
                    }
                    }
                },
            },
            series: [
                {
                name: '散点', // series名称
                //type: 'effectScatter', // series图表类型 散点图类型
                type: 'scatter',
                coordinateSystem: 'geo', // series坐标系类型
                data: geoCoordMap,
                itemStyle: {
                    normal: {
                    type: 'radial',
                    color: 'rgba(14,245,209,1)'
                    }
                },  
                }
            ]
            }
            option && myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
    }
}
</script>

<style scoped>
    .maxs{
        width: 100%;height: 100%;
        /* background: url('./shand.png') no-repeat;
        background-size:100% 100%;margin: auto; */
        position: relative;
    }
    .maps{
        position: absolute;
        
    }
    .dawdaw{
        position: absolute;
        z-index: 999;
    }
</style>